【HUGO】作成したWebページを多言語対応する

#Hugo

#プログラミング不要

2019.09.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前回は新規プロジェクトを作成し、Firebaseにデプロイするところまでやりました。

今回は作成したWebページを多言語対応する方法についてまとめました。

プロジェクトを作成

前回と同じ手順で新規プロジェクトを作成し、テンプレートをthemesディレクトリにクローンします。

新規プロジェクトを作成

hello-hugoという名前のプロジェクトを作成します。

~hugo_localize> hugo new site hello-hugo
Congratulations! Your new Hugo site is created in /hugo_localize/hello-hugo.

Just a few more steps and you\'re ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

テンプレート(Theme)をクローン＆config.tomlで設定

作成したプロジェクトのthemesディレクトリへテンプレートをクローンします。

 ~/hugo_localize> cd hello-hugo/themes
 ~/h/themes> git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Cloning into 'themes/ananke'...
remote: Enumerating objects: 15, done.
remote: Counting objects: 100% (15/15), done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 1402 (delta 3), reused 5 (delta 1), pack-reused 1387
Receiving objects: 100% (1402/1402), 4.15 MiB | 2.99 MiB/s, done.
Resolving deltas: 100% (753/753), done.

// Themeを設定
~/h/themes> echo 'theme = "ananke"' >> config.toml

_index.mdを作成

Homeページをcontents下に作成します。 contentsディレクトリに_index.mdファイルを作成して内容を以下のように設定してください。

---
description: "日本むかし話"
---

# もも太郎

昔あるところに、
おじいさんとおばあさんが住んでいました。

ある日、おばあさんが川で洗濯をしていると、川上から、大きな（巨大な）ももが、どんぶらこっこ、どんぶらこっこと流れてきました。

おばあさんは、ももを家に持って帰ると、
おじいさんと食べようとわってみました。

すると、おどろいたことに、
元気な男の子がももから現われました。

おじいさんとおばあさんは、
「ももから生まれたから、桃太郎と名づけよう。」と言いました。

反映されているかブラウザ上で確認します。

言語に関する設定をまだ何もしていないのでデフォルトで"EN"となっています。

hugo server -D

                   | EN  
+------------------+----+
  Pages            |  7  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  3  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 20 ms
Watching for changes in /hugo_localize/hello-hugo/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /hugo_localize/hello-hugo/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

このプロジェクトを多言語対応してゆきます。

config.tomlで設定

config.tomlに設定を追加します。

baseURL = "http://example.org/"
title = "My New Hugo Site"
theme = "ananke"

DefaultContentLanguage = "ja"

[languages]
  [languages.en]
    languageName = "English"
    weight = 10
    title = "Japanese Old Tales"
  [languages.ja]
    languageName = "Japanese"
    weight = 20
    title = "日本むかし話"

英語ページを作成

先ほど作成した_index.mdの英語版を作成します。
名前は_index.en.mdで保存します。

---
description: "The Peach Boy"
---

# The Peach Boy

Once upon a time, there lived an old couple in a small village.

One day the old wife was washing her clothes in the river when a huge peach came tumbling down the stream.

The old woman brought the peach home and cut it up to share with her husband.

To their great surprise, a healthy baby boy came right out of the peach!

The old couple said, “Let’s name him Momotaro (Peach-boy) as he was born from a peach.”

日本語ページのファイル名を変更

先ほど_index.mdの名前で作成した日本語のファイルを
_index.ja.mdへ変更してください。

ブラウザで確認

先ほどのコマンドをもう一度叩いてみます。日本語ページに加え英語ページのリソースが追加されているのが確認できます。

hugo server -D

                   | EN | JA  
+------------------+----+----+
  Pages            |  7 |  7  
  Paginator pages  |  0 |  0  
  Non-page files   |  0 |  0  
  Static files     |  3 |  3  
  Processed images |  0 |  0  
  Aliases          |  1 |  0  
  Sitemaps         |  2 |  1  
  Cleaned          |  0 |  0